<template>
	<view>
		<u-navbar :is-back="false" title="" :background="background">
			<view class="slot-wrap">我的管家</view>
<!-- 			<view v-if="userInfo===''" class="slot-right" @click="toLogin">登录</view>
			<view v-if="userInfo!==''">
				<image class="tip-imgbo" src="/static/macroMes.png"></image>
			</view> -->
		</u-navbar>
		<view>
			<view style="margin-bottom: 100rpx;">
				<view style="display: flex;">
					<!-- <a class="name">{{managerMsg.name}}</a> -->
					<!-- <small-title content="管家信息"></small-title> -->
					<image class="head-portrait-image" :src="headUrl"></image>
				</view>
				<view style="display: flex;">
					<a class="title-des">个人资料</a>
					<!-- <small-title content="管家信息"></small-title> -->
				</view>
				<view class="item-table">
					<view-item name="名称" :value="managerMsg.name"></view-item>
					<view-item name="手机号码" :value="managerMsg.phone" :isLast="true"></view-item>
				</view>

			</view>
			<a href="#" class="myButton" @click="beginChat">开始聊天</a>
			<a href="#" class="myButton2" @click="calPhone">电话</a>
		</view>
	</view>
</template>

<script>
	import {
		CHATTER_TO
	} from '../../util/rongCloud/messaging.js'
	import {
		imService,
		RongIMLib,
		connectRongCloud,
	} from '../../util/rongCloud/cloudUtil';
	import {
		uniSetStorageSync,
	} from '../../util/funcs.js'
	import {
		syncGetOrderList,
		syncGetSysUsrInfo,
	} from "../../util/network.js"
	export default{
		data() {
			return {
				managerRongId:'',
				managerMsg: {'name':'','phone':''},
				background : {
					backgroundColor : '#FFFFFF'
				},
				current: 0,
				headUrl: '',
			}
		},
		methods: {
			beginChat(){
				uni.navigateTo({
					url:'../chat/privateChat/privateChat?targetUrl=' + this.headUrl + '&id=' + this.managerRongId.replace('merchant_v1_','') + '&name=' + this.managerMsg.name
				})
			},
			calPhone(){
				uni.makePhoneCall({
					phoneNumber: this.managerMsg.phone.toString() //仅为示例
				});
			},

		},
		onShow() {
			let a = syncGetOrderList("goods-release/list", [0], 0, 8)
			 a.then((res)=>{
				 if(res.data.code == 200){
					 console.log("异步userinfo",uni.getStorageSync("userinfo"))
					let b = syncGetSysUsrInfo("systemuser/show/" + uni.getStorageSync("userinfo").stewardId);
					connectRongCloud()
					b.then((v)=>{
						 if(v.data.code == 200){
							this.managerMsg.name = v.data.data.name
							this.managerMsg.phone = v.data.data.phone
							this.managerRongId = "merchant_v1_" + uni.getStorageSync("userinfo").stewardId
							let chatter = {rongcloud_id:''}
							chatter.rongcloud_id = this.managerRongId
							this.headUrl = v.data.data.headThumb
							console.log("异步",v.data)
							uniSetStorageSync(CHATTER_TO,chatter)
							this.$forceUpdate()
						}
					})
					
				}else {
					uni.navigateTo({
						url: '/pages/login/login'
					});
				}
			})

		}
	}
</script>

<style scoped lang="scss">
	page{
		background-color: #ffffff
	}
	/* 底部内边距为150rpx跟底部离一小段距离UI效果更好 */
	.container {
		// padding-bottom: 1000rpx;
		background-color: #FFFFFF;
	}
	.slot-wrap {
		display: flex;
		align-items: center;
		padding-left: 40rpx;
		font-size: 35rpx;
		font-weight: 700;
	}
	.slot-right{
		display: flex;
		align-items: flex-end;
		padding-left: 540rpx;
		font-size: 30rpx;
		color: #0000FF;
	}
	.tip-imgbo {
		flex-direction:flex;
		height: 45rpx;
		width: 45rpx;
		padding-left: 580rpx;
		margin-top: 15rpx;
		font-size: 35rpx;
	}
	.item-table{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.myButton {
		position: absolute;
		right: 30rpx;
		bottom: 10rpx;
		box-shadow:inset 0px 1px 0px 0px #9acc85;
		background:linear-gradient(to bottom, #74ad5a 5%, #68a54b 100%);
		background-color:#74ad5a;
		border-radius:3px;
		border:1px solid #3b6e22;
		display:inline-block;
		cursor:pointer;
		color:#ffffff;
		font-family:Arial;
		font-size:18px;
		padding:16px 25px;
		text-decoration:none;
		text-shadow:0px 1px 0px #92b879;
	}
	.myButton:hover {
		// background:linear-gradient(to bottom, #68a54b 5%, #74ad5a 100%);
		background-color:#68a54b;
	}

	.myButton2 {
		position: absolute;
		right: 300rpx;
		bottom: 10rpx;
		box-shadow:inset 0px 1px 0px 0px #cf866c;
		background:linear-gradient(to bottom, #d0451b 5%, #bc3315 100%);
		background-color:#d0451b;
		border-radius:3px;
		border:1px solid #942911;
		display:inline-block;
		cursor:pointer;
		color:#ffffff;
		font-family:Arial;
		font-size:18px;
		padding:16px 42px;
		text-decoration:none;
		text-shadow:0px 1px 0px #854629;
	}
	.myButton2:hover {
		// background:linear-gradient(to bottom, #bc3315 5%, #d0451b 100%);
		background-color:#bc3315;
	}
	.name {
	  -webkit-box-sizing: content-box;
	  -moz-box-sizing: content-box;
	  box-sizing: content-box;
	  position: relative;
	  margin: 30px;
	  padding: 1px;
	  border: none;
	  font: normal normal bold 22px/1 Arial Black, Gadget, sans-serif;
	  color: black;
	  -o-text-overflow: ellipsis;
	  text-overflow: ellipsis;
	}
	.title-des {
	  -webkit-box-sizing: content-box;
	  -moz-box-sizing: content-box;
	  box-sizing: content-box;
	  position: relative;
	  margin: 30px;
	  padding: 1px;
	  margin-top: 200rpx;
	  border: none;
	  font: normal normal bold 20px/1 Arial Black, Gadget, sans-serif;
	  color: rgba(90,90,90,1);
	  -o-text-overflow: ellipsis;
	  text-overflow: ellipsis;
	}	/* 头像图像 */
	.head-portrait-image {
		/* 水平垂直居中 */
		position: relative;
		left: 80rpx;
		top: 120rpx;
		// margin: auto;
		/* 宽高 */
		width: 144rpx;
		height: 144rpx;
		border-radius: 100%;
	}
</style>
